<template>
  <!-- 
    问题:子组件怎么才能修改父组件里的数据?

    补充:组件是遍历循环出来的  所以按钮也是通过同一个方法遍历出来的 
    那么怎么区分是点击的哪个按钮
    传递一个索引值

    需求:商品组件,实现砍价功能

    思路:
     - 父组件内 绑定自定义事件名和事件处理函数
     语法:@自定义事件名="父mehtods里的函数名"
     - 子组件触发父组件自定义事件方法
     子组件内 触发父组件绑定的自定义事件 从而使父组件里的methods处理函数执行

    语法:
    父: @自定义事件名="父methods函数"
    子: this.$emit("自定义事件名", 传值)  执行父methods里函数代码
    -->
  <div>

    <!-- 1.1父子通信 所有的数据传到子组件 包括索引  -->
    <MyProduct
      v-for="(obj,ind) in list"
      :title="obj.proname"
      :price= obj.proprice
      :info = obj.info
      :index = ind
      :key="obj.id"

      @changePrice=fn
    >
    </MyProduct>
  </div>
</template>

<script>
// 引入组件MyProduct_sub
import MyProduct from './components/MyProduct_sub.vue'

export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: '超级好吃的棒棒糖',
          proprice: 26.8,
          info: '开业大酬宾, 全场8折'
        },
        {
          id: 2,
          proname: '超级好吃的巧克力',
          proprice: 18.8,
          info: '开业大酬宾, 全场8折'
        },
        {
          id: 3,
          proname: '超级好吃的棉花糖',
          proprice: 30.9,
          info: '开业大酬宾, 全场8折'
        }
      ]
    }
  },
  // 注册组件
  components: {
    MyProduct
  },

  methods: {
    // 1.5 子组件触发事件 接收传过来的参数
    fn(index, price) {
      //  逻辑代码
      console.log(index,price);
      this.list[index].proprice -= price
    }
  }
}
</script>

<style>
</style>